<template>
  <AdminLayout :title="`编辑用户 - ${user.name}`" subtitle="修改用户基本信息">
    
    <div class="max-w-4xl">
      <div class="bg-white shadow-sm rounded-lg">
        <!-- 卡片标题 -->
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">用户信息</h3>
        </div>

        <!-- 表单内容 -->
        <form @submit.prevent="submit" class="px-6 py-6 space-y-6">
          <!-- 姓名 -->
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700">
              姓名 <span class="text-red-500">*</span>
            </label>
            <input
              id="name"
              v-model="form.name"
              type="text"
              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
              :class="{ 'border-red-300': form.errors.name }"
              placeholder="请输入姓名"
              required
            />
            <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">{{ form.errors.name }}</p>
          </div>

          <!-- 邮箱 -->
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
            <input
              id="email"
              v-model="form.email"
              type="email"
              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
              :class="{ 'border-red-300': form.errors.email }"
              placeholder="请输入邮箱地址"
            />
            <p v-if="form.errors.email" class="mt-1 text-sm text-red-600">{{ form.errors.email }}</p>
            <p v-if="user.email_verified_at" class="mt-1 text-sm text-gray-500">
              已验证：{{ formatDate(user.email_verified_at) }}
            </p>
          </div>

          <!-- 手机号 -->
          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700">手机号</label>
            <input
              id="phone"
              v-model="form.phone"
              type="tel"
              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
              :class="{ 'border-red-300': form.errors.phone }"
              placeholder="请输入手机号码"
            />
            <p v-if="form.errors.phone" class="mt-1 text-sm text-red-600">{{ form.errors.phone }}</p>
          </div>

          <!-- 生日 -->
          <div>
            <label for="birthday" class="block text-sm font-medium text-gray-700">生日</label>
            <input
              id="birthday"
              v-model="form.birthday"
              type="date"
              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
              :class="{ 'border-red-300': form.errors.birthday }"
            />
            <p v-if="form.errors.birthday" class="mt-1 text-sm text-red-600">{{ form.errors.birthday }}</p>
          </div>

          <!-- 个人简介 -->
          <div>
            <label for="bio" class="block text-sm font-medium text-gray-700">个人简介</label>
            <textarea
              id="bio"
              v-model="form.bio"
              rows="4"
              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
              :class="{ 'border-red-300': form.errors.bio }"
              placeholder="输入用户简介..."
            ></textarea>
            <p v-if="form.errors.bio" class="mt-1 text-sm text-red-600">{{ form.errors.bio }}</p>
            <p class="mt-1 text-sm text-gray-500">最多 500 字</p>
          </div>

          <!-- 操作按钮 -->
          <div class="flex items-center justify-between pt-6 border-t border-gray-200">
            <Link :href="route('admin.users.show', user.id)" class="text-sm text-gray-600 hover:text-gray-900">
              返回用户详情
            </Link>
            <div class="flex gap-3">
              <Link 
                :href="route('admin.users.show', user.id)" 
                class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
              >
                取消
              </Link>
              <button
                type="submit"
                :disabled="form.processing"
                class="px-4 py-2 text-sm text-white bg-gray-900 border border-transparent rounded-md shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ form.processing ? '保存中...' : '保存' }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { Link, useForm } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

const props = defineProps({
  user: { type: Object, required: true }
})

const form = useForm({
  name: props.user.name,
  email: props.user.email,
  phone: props.user.phone,
  birthday: props.user.birthday,
  bio: props.user.bio,
})

const submit = () => {
  form.put(route('admin.users.update', props.user.id))
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>
